<script lang="ts" setup>
  import { Card, Link, Spin } from '@arco-design/web-vue';
  import { computed, ref } from 'vue';
  import { queryRecommendFollow } from '../api/recommend';
  import type { FollowListResultModel } from '../api/model/recommendModel';
  import AttentionItem from './AttentionItem.vue';
  import { useUserStore } from '/@/store/modules/user';

  const userStore = useUserStore();
  const userInfo = computed(() => userStore.getUserInfo);
  const recommendFollowersLoading = ref(true);
  const recommendFollowers = ref<FollowListResultModel>([]);

  const reloadFollowList = async () => {
    recommendFollowersLoading.value = true;
    const result = await queryRecommendFollow(userInfo.value?.id);
    recommendFollowers.value.splice(0, recommendFollowers.value.length, ...result);
    recommendFollowersLoading.value = false;
  };

  reloadFollowList();
</script>
<template>
  <Card title="推荐关注" :bordered="false" v-if="recommendFollowers.length > 0">
    <template #extra>
      <Link @click="reloadFollowList"><IconSync /> 换一换</Link>
    </template>
    <div class="relative">
      <Spin :loading="recommendFollowersLoading" class="w-full">
        <AttentionItem
          class="mb-[10px]"
          :data="item"
          v-for="(item, index) in recommendFollowers"
          :key="index"
        />
      </Spin>
    </div>
  </Card>
</template>
